<template>
  <div class="bg-earth" style="width: 100%; height: 100%">
    <div id="chinaMap" style="width: 100%; height: 100%"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
// import axios from 'axios';

import geoJson from '@/assets/js/china.json';
export default {
  name: "chinaMap",
  data() {
    return {
      d1: {
        '江苏': 10041,
        '黑龙江': 4093,
        '内蒙古': 1157,
        '吉林': 4903,
        '北京': 2667,
        '辽宁': 8331,
        '河北': 23727,
        '天津': 681,
        '山西': 5352,
        '陕西': 38,
        '甘肃': 77,
        '宁夏': 65,
        '青海': 10,
        '新疆': 22000,
        '四川': 309,
        '重庆': 77,
        '山东': 21666,
        '河南': 15717,
        '安徽': 15671,
        '湖北': 3714,
        '浙江': 3141,
        '福建': 955,
        '江西': 4978,
        '湖南': 778,
        '贵州': 33,
        '云南': 149,
        '广东': 1124,
        '广西': 125,
        '海南': 7,
        '上海': 2155,
        '西藏': 0,
        '澳门': 0,
        '香港': 0,
        '台湾': 10
      },
      d2: {
        '江苏': 159,
        '黑龙江': 5,
        '内蒙古': 54,
        '吉林': 10,
        '北京': 0,
        '辽宁': 0,
        '河北': 1679,
        '天津': 1,
        '山西': 2698,
        '陕西': 1744,
        '甘肃': 362,
        '宁夏': 429,
        '青海': 122,
        '新疆': 731,
        '四川': 3925,
        '重庆': 1480,
        '山东': 79,
        '河南': 1017,
        '安徽': 208,
        '湖北': 1209,
        '浙江': 1418,
        '福建': 1237,
        '江西': 1004,
        '湖南': 1511,
        '贵州': 345,
        '云南': 1429,
        '广东': 2242,
        '广西': 2271,
        '海南': 59,
        '上海': 8,
        '西藏': 0,
        '澳门': 0,
        '香港': 0,
        '台湾': 10
      },
      d3: {
        '江苏': 11788,
        '黑龙江': 1944,
        '内蒙古': 2954,
        '吉林': 3482,
        '北京': 1808,
        '辽宁': 5488,
        '河北': 27035,
        '天津': 2270,
        '山西': 13623,
        '陕西': 4221,
        '甘肃': 754,
        '宁夏': 1783,
        '青海': 91,
        '新疆': 1907,
        '四川': 4905,
        '重庆': 1420,
        '山东': 39781,
        '河南': 16154,
        '安徽': 7914,
        '湖北': 6802,
        '浙江': 5812,
        '福建': 3345,
        '江西': 4996,
        '湖南': 5627,
        '贵州': 1504,
        '云南': 2725,
        '广东': 6339,
        '广西': 1009,
        '海南': 0,
        '上海': 1988,
        '西藏': 0,
        '澳门': 0,
        '香港': 0,
        '台湾': 10
      },
      d4: {
        '江苏': 10041,
        '黑龙江': 4093,
        '内蒙古': 1157,
        '吉林': 4903,
        '北京': 2667,
        '辽宁': 8331,
        '河北': 23727,
        '天津': 681,
        '山西': 5352,
        '陕西': 38,
        '甘肃': 77,
        '宁夏': 65,
        '青海': 10,
        '新疆': 193,
        '四川': 309,
        '重庆': 77,
        '山东': 21666,
        '河南': 15717,
        '安徽': 15671,
        '湖北': 3714,
        '浙江': 3141,
        '福建': 955,
        '江西': 4978,
        '湖南': 778,
        '贵州': 33,
        '云南': 149,
        '广东': 1124,
        '广西': 125,
        '海南': 7,
        '上海': 2155,
        '西藏': 0,
        '澳门': 0,
        '香港': 0,
        '台湾': 10
      },
      d5: {
        '江苏': 159,
        '黑龙江': 5,
        '内蒙古': 54,
        '吉林': 10,
        '北京': 0,
        '辽宁': 0,
        '河北': 1679,
        '天津': 1,
        '山西': 2698,
        '陕西': 1744,
        '甘肃': 362,
        '宁夏': 429,
        '青海': 122,
        '新疆': 731,
        '四川': 3925,
        '重庆': 1480,
        '山东': 79,
        '河南': 1017,
        '安徽': 208,
        '湖北': 1209,
        '浙江': 1418,
        '福建': 1237,
        '江西': 1004,
        '湖南': 1511,
        '贵州': 345,
        '云南': 1429,
        '广东': 2242,
        '广西': 2271,
        '海南': 59,
        '上海': 8,
        '西藏': 40,
        '澳门': 10,
        '香港': 20,
        '台湾': 10
      },
      d6: {
        '江苏': 11788,
        '黑龙江': 1944,
        '内蒙古': 2954,
        '吉林': 3482,
        '北京': 1808,
        '辽宁': 5488,
        '河北': 27035,
        '天津': 2270,
        '山西': 13623,
        '陕西': 4221,
        '甘肃': 754,
        '宁夏': 1783,
        '青海': 91,
        '新疆': 1907,
        '四川': 4905,
        '重庆': 1420,
        '山东': 39781,
        '河南': 16154,
        '安徽': 7914,
        '湖北': 6802,
        '浙江': 5812,
        '福建': 3345,
        '江西': 4996,
        '湖南': 5627,
        '贵州': 1504,
        '云南': 2725,
        '广东': 6339,
        '广西': 1009,
        '海南': 0,
        '上海': 1988,
        '西藏': 0,
        '澳门': 0,
        '香港': 0,
        '台湾': 10
      },
    }
  },
  mounted() {
    this.initChinaChart(); // 初始化中国地图
  },
  methods: {
    // 初始化中国地图
    async initChinaChart() {
      const myEchart = echarts.init(document.getElementById('chinaMap'));
      try {
        // const response = await axios.get("/api/asset/get/areas_v3/country/china.json")
        // const geoJson = response.data;

        let geoCoordMap = {}
        let geoGpsMap = [];
        let geoMapData = [];

        geoJson.features.forEach((item, index) => {
          if(index < 34) {
            geoCoordMap[item.properties.name] = item.properties.center;
            if(item.properties.adcode == '320000') {
              geoGpsMap = item.properties.center;
            }
            geoMapData.push({
              name: item.properties.name,
              value: item.properties.center
            })
          }
        })
        let t = 1; // 流入流出控制
        let r = 1; // 右侧流入流出控制

        let colors = ["#1DE9B6", "#EEDD78", "#32C5E9", "#FFDB5C", "#99A2EA", "#CCFFFF"];
        let year = ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06"];
        let mapData = [[],[],[],[],[],[]];

        /*柱子Y名称*/
        let categoryData = [];
        let barData = [];
        for (let key in geoCoordMap) {
          mapData[0].push({
            "year": year[0],
            "name": key,
            "value": this.d1[key] / 100,
          });
          mapData[1].push({
            "year": year[1],
            "name": key,
            "value": this.d2[key] / 100,
          });
          mapData[2].push({
            "year": year[2],
            "name": key,
            "value": this.d3[key] / 100,
          });
          mapData[3].push({
            "year": year[3],
            "name": key,
            "value": this.d4[key] / 100,
          });
          mapData[4].push({
            "year": year[4],
            "name": key,
            "value": this.d5[key] / 100,
          });
          mapData[5].push({
            "year": year[5],
            "name": key,
            "value": this.d6[key] / 100,
          });
        }
        for (let i = 0; i < mapData.length; i++) {
          mapData[i].sort(function sortNumber(a, b) {
            return a.value - b.value
          });
          barData.push([]);
          categoryData.push([]);
          for (let j = 0; j < mapData[i].length; j++) {
            barData[i].push(mapData[i][j].value);
            categoryData[i].push(mapData[i][j].name);
          }
        }
        echarts.registerMap('china', geoJson);
        let convertData = function (data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        let convertToLineData = function (data, gps) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let dataItem = data[i];
            let toCoord = geoCoordMap[dataItem.name];
            let fromCoord = gps;
            if (fromCoord && toCoord) {
              if (t == 1) {
                res.push([{
                  coord: toCoord,
                }, {
                  coord: fromCoord,
                  value: dataItem.value
                }]);
              } else {
                res.push([{
                  coord: fromCoord,
                  value: dataItem.value
                }, {
                  coord: toCoord,
                }]);
              }
            }
          }
          if (t == 0) {
            t = 1;
          } else {
            t = 0;
          }
          return res;
        };
        let optionXyMap01 = {
          timeline: {
            data: year,
            axisType: 'category',
            autoPlay: true,
            playInterval: 5000,
            left: '10%',
            right: '10%',
            bottom: '3%',
            width: '80%',
            label: {
              normal: {
                textStyle: {
                  color: '#ddd',
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                }
              }
            },
            symbolSize: 10,
            lineStyle: {
              color: '#555'
            },
            checkpointStyle: {
              borderColor: '#c9c9c9',
              borderWidth: 3
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: '#666',
                borderColor: '#666'
              },
              emphasis: {
                color: '#aaa',
                borderColor: '#aaa'
              }
            },
          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            grid: {
              right: '2%',
              top: '10%',
              bottom: '10%',
              width: '18%'
            },
            tooltip: {
              trigger: 'axis', // hover触发器
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: 'rgba(150,150,150,0.1)' //hover颜色
                }
              }
            },
            // 地图
            geo: {
              show: true,
              map: 'china',
              roam: true,
              zoom: 1,
              center: geoGpsMap,
              label: {
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(147, 235, 248, 1)',
                  borderWidth: 1,
                  areaColor: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(128, 217, 248, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10
                },
                emphasis: {
                  areaColor: '#389BB7',
                  borderWidth: 0
                }
              }
            },
          },
          options: []
        };

        for (let n = 0; n < year.length; n++) {
          let statistic_name = "各省" + (r == 1 ? "流入" : "流出") + "流量";
          optionXyMap01.options.push({
            title:
                [{
                  left: '25%',
                  top: '1%',
                  textStyle: {
                    color: '#fff',
                    fontSize: 25
                  }
                },
                  {
                    id: 'statistic',
                    text: statistic_name,
                    left: '75%',
                    top: '3%',
                    textStyle: {
                      color: '#fff',
                      fontSize: 16
                    }
                  }
                ],
            xAxis: {
              type: 'value',
              scale: true,
              position: 'top',
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 1,
                textStyle: {
                  color: '#aaa'
                }
              },
            },
            yAxis: {
              type: 'category',
              //  name: 'TOP 20',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: '#ddd'
                }
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: '#ddd'
                }
              },
              data: categoryData[n]
            },

            series: [
              //未知作用
              {
                //文字和标志
                name: 'light',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n]),
                symbolSize: function () {
                  return 6;
                },
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[n]
                  }
                }
              },
              //地图
              {
                type: 'map',
                map: 'china',
                geoIndex: 0,
                aspectScale: 1, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#031525',
                    borderColor: '#FFFFFF',
                  },
                  emphasis: {
                    areaColor: '#2B91B7'
                  }
                },
                animation: false,
                data: mapData
              },
              //地图点的动画效果
              {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(mapData[n].sort(function (a, b) {
                  return b.value - a.value;
                }).slice(0, 20)),
                symbolSize: function () {
                  return 5;
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: colors[n],
                    shadowBlur: 10,
                    shadowColor: colors[n]
                  }
                },
                zlevel: 1
              },
              //地图线的动画效果
              {
                type: 'lines',
                zlevel: 2,
                effect: {
                  show: true,
                  period: 3, //箭头指向速度，值越小速度越快
                  trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: 'arrow', //箭头图标
                  symbolSize: 3, //图标大小
                },
                lineStyle: {
                  normal: {
                    color: colors[n],
                    width: 1, //尾迹线条宽度
                    opacity: 0.1, //尾迹线条透明度
                    curveness: .5 //尾迹线条曲直度 越大越弯曲
                  }
                },
                data: convertToLineData(mapData[n], geoGpsMap)
              },
              //柱状图
              {
                zlevel: 1.5,
                type: 'bar',
                barMaxWidth: 8,
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: colors[n],
                    barBorderRadius: [0, 30, 30, 0]
                  }
                },
                data: barData[n]
              }
            ]
          });
          if (r == 0) {
            r = 1;
          } else {
            r = 0;
          }
        }
        myEchart.setOption(optionXyMap01);
      } catch (e) {
        console.error('获取地图数据失败:', e);
      }
    },
  }
}

</script>

<style scoped lang="scss">

.bg-earth {
  //background: url("@/assets/earth.png");
  //background-size: 100% 100%;
  margin: 0 auto;
}

</style>

